  <div class="find-app" id="app">
    <!-- public-head -->
    <div class="header-mobile">
      <a class="nav-back" href="javascript:history.go(-1)">
        <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
      </a>
      <h1 class="nav-title">消息列表</h1>
    </div>
    <!-- main-wrapepr -->
    <div class="main-wrapper">
      <div class="message-list-wrapper">
        <div class="message-list">
          <mt-loadmore ref="loadmore" :auto-fill="nofill" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange">
            <div class="list-item" v-for="(item,index) in list" :key='index'>
              <a :href="item.url">
                <div class="user-panel">
                  <img class="avatar" v-lazy="item.user.avatar">
                  <div>
                    <p class="name">{{item.name}}</p>
                    <p class="info">{{item.content}}</p>
                  </div>
                </div>
                <div class="time">{{item.createtime}}</div>
              </a>
            </div>
            <div v-if="list.length !==0">暂无数据</div>
            <div slot="top" class="mint-loadmore-top">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">释放更新</span>
              <span v-show="bottomStatus === 'loading'">加载中...</span>
            </div>
          </mt-loadmore>
        </div>
      </div>
    </div>
  </div>
  <script>
    let index = new Vue({
      el: '#app',
      data: {
        lowsum: 0,
        list: [],
        page: 1,
        immediateOption: false,
        bottomStatus: '',
        nofill: false
      },
      created() {},
      mounted() {
        this.ajax()
      },
      methods: {
        loadBottom() {
          console.log('run')
          this.ajax()
        },
        handleBottomChange(status) {
          this.bottomStatus = status;
        },
        ajax() {

          let self = this;
          axios({
            method: "post",
            url: "{:url('index/messagelist')}",
            data: {
              page: self.page
            },
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          }).then(res => {
            if (res.data.code == 1) {
              self.lowsum = res.data.data;
              self.list = self.list.concat(res.data.data)
              self.page++;
            } else {
              self.$toast({
                message: res.data.msg,
                position: 'bottom',
                duration: 5000
              })
            }
            self.$refs.loadmore.onBottomLoaded();
          })
        }
      }
    })
  </script>